import React from 'react'
import {reduxForm} from 'redux-form';
import AssetRichTextEditor from './AssetRichTextEditor'

class AssetSettingEditorBody extends React.Component {
  constructor(props) {
    super(props);
  }

  onSubmit(e) {
    console.log(e)
  }

  render() {
    const {fields: {title, digest, author, link}, handleSubmit} = this.props;
    return (
      <div className="content-body content-body-scroll asset-setting-editor">
        <form onSubmit={handleSubmit(this.onSubmit)} className="form-horizontal">

          <div className="form-group">
            <label className="col-sm-1 control-label" for="asset-title">图文标题</label>
            <div className="col-sm-8">
              <input type="text" className="form-control" id="asset-title" {...title}/>
            </div>
          </div>

          <div className="form-group">
            <label className="col-sm-1 control-label" for="asset-author">来源作者</label>
            <div className="col-sm-8">
              <input type="text" className="form-control" id="asset-author" {...author}/>
            </div>
          </div>

          <div className="form-group">
            <label for="cover-image" className="col-sm-1 control-label">封面图片</label>
            <div className="col-sm-2">
              <input type="file" id="cover-image" />
            </div>
            <div class="checkbox col-sm-4">
              <label>
                <input type="checkbox" /> 封面图片显示在正文中
              </label>
            </div>
          </div>

          <div className="form-group">
            <label className="col-sm-1 control-label" for="asset-digest">正文摘要</label>
            <div className="col-sm-8">
              <textarea rows="3" cols="50" className="form-control" id="asset-digest" {...digest}>
              </textarea>
            </div>
          </div>

          <div className="form-group">
            <label className="col-sm-1 control-label" for="asset-link">原文链接</label>
            <div className="col-sm-8">
              <input type="text" className="form-control" id="asset-link" {...link}/>
            </div>
          </div>

          <div className="form-group">
            <label className="col-sm-1 control-label" for="asset-link">正文</label>
            <div className="col-sm-8">
              <AssetRichTextEditor
                id="asset-richtext"
                height="150"/>
            </div>
          </div>

          <div className="btn-group submit-btns" role="group">
            <div className="col-sm-1"></div>
            <button type="submit" className="btn btn-danger">保存</button>
            <button className="btn btn-default">取消</button>
          </div>

        </form>
      </div>
    );
  }
}

AssetSettingEditorBody = reduxForm({ // <----- THIS IS THE IMPORTANT PART!
  form: 'contact',                           // a unique name for this form
  fields: ['title', 'digest', 'author', 'link'] // all the fields in your form
})(AssetSettingEditorBody);

export default AssetSettingEditorBody;
